﻿<div style="display: flex; width=100%">
    <FluentButton id="myPopoverButtonl" Appearance="Appearance.Accent" @onclick="() => _visibleL = !_visibleL">
        Open Callout 1
    </FluentButton>

    <FluentSpacer />

    <FluentButton id="myPopoverButtonr" Appearance="Appearance.Accent" @onclick="() => _visibleR = !_visibleR">
        Open Callout 2
    </FluentButton>

    <FluentPopover Style="width: 300px;" VerticalThreshold="170" AnchorId="myPopoverButtonl" @bind-Open="_visibleL">
        <Header>Callout Header</Header>
        <Body>
            <FluentStack Orientation="Orientation.Vertical">
                <FluentCheckbox>Item 1</FluentCheckbox>
                <FluentCheckbox>Item 2</FluentCheckbox>
                <FluentTextField tabindex="0"></FluentTextField>
            </FluentStack>
        </Body>
        <Footer>Callout Footer</Footer>
    </FluentPopover>

    <FluentPopover Style="width: 300px;" VerticalThreshold="170" AnchorId="myPopoverButtonr" @bind-Open="_visibleR">
        <Header>Callout Header</Header>
        <Body>
            Callout Body
        </Body>
        <Footer>Callout Footer</Footer>
    </FluentPopover>
</div>

@code {
    bool _visibleL, _visibleR;
}
